<template>
	<div class="createdmusic">
		<div class="title">
			<h2 v-if="data.length">{{data[0].category}}
			<i class="iconfont icon-you"></i></h2>

			<p>播放全部</p>
		</div>

		<div class="list">
			<div class="musiclist"   v-if="index<4" v-for="(item,index) in data" :key="item.id">
				<div class="imgbox">
					<img :src="item.picUrl" alt="" />
				</div>
				<div class="textmusic">
					<div class="content">
						<h3>{{item.name}}</h3>
						<div class="headers">
							<div class="pic_box">
								<img :src="item.dj.avatarUrl" alt="" />
							</div>
							<p>{{item.dj.nickname}}</p>
						</div>
						<div class="numbers">
							<i class="iconfont icon-bofang1"></i>
							<span>{{item.subCount}}</span>
						</div>
					</div>
					<i class="iconfont icon-bofang"></i>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "creatmusic",
		data(){
			return{
				data:[]
			}
		},
		props: {
			id: [String, Number]
		},
		created() {
			this.$http.get("/dj/recommend/type", {
				params: {
					type: this.id
				}
			}).then(res => {
				res.data.djRadios.forEach((val, index) => {

					if(val.subCount > 10000) {
						val.subCount = parseInt(val.subCount / 10000) + "万"
					}

				})
				this.data = res.data.djRadios
//				console.log(this.data)
			})
		},
		
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.createdmusic {
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: vw(16) vw(16);
			h2 {
				font-size: vw(16);
				i {
					font-size: vw(10);
					color: #999;
					font-weight: normal;
				}
			}
			p {
				font-size: vw(10);
				border: 1px solid #ddd;
				border-radius: vw(10);
				padding: vw(4) vw(6);
			}
		}
		.list {
			.musiclist {
				display: flex;
				padding: 0 vw(16);
				align-items: center;
				margin: vw(6) 0;
				.imgbox {
					width: 14%;
					height: vw(46);
					overflow: hidden;
					border-radius: vw(6);
					img {
						width: 100%;
					}
				}
				.textmusic {
					width: 86%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.content {
						width: 90%;
						font-size: vw(16);
						margin-left: vw(10);
						h3 {
							font-size: vw(14);
							font-weight: normal;
						}
						.headers {
							display: inline-block;
							margin-right: vw(18);
							.pic_box {
								width: vw(18);
								height: vw(18);
								border-radius: 50%;
								overflow: hidden;
								display: inline-block;
								vertical-align: middle;
								img {
									width: 100%;
								}
							}
							p {
								display: inline-block;
								font-size: vw(10);
								vertical-align: middle;
								margin-left: vw(4);
							}
						}
						.numbers {
							display: inline-block;
							i {
								font-size: vw(8);
								color: #999;
								margin-right: vw(4);
							}
							span {
								font-size: vw(10);
								color: #999;
							}
						}
					}
					i {
						font-size: vw(24);
					}
				}
			}
		}
	}
</style>